/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2020-05-28 15:51:34
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-18 10:25:18
 */
import React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Spin } from 'antd';
import { WeaLeftRightLayout, WeaNewScroll, WeaInputSearch } from 'ecCom';

@inject('docTemplateStore')
@observer
class Index extends React.Component {
  constructor(props) {
    super(props);
  }

  changeMould = (e) => {
    const { setProperty, getThPreviewUrl } = this.props.docTemplateStore;
    setProperty('loading', true);
    setProperty('error', false);
    setProperty('mouldid', e.key);
    getThPreviewUrl();
  }

  // 左侧列表
  getLeftCom = () => {
    let { mouldList, mouldid, mouldSearchValue, mouldSearch } = this.props.docTemplateStore;
    mouldList = toJS(mouldList);
    return (
      <div className={'wf-doctemplate-menu'}>
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7ij9ah`}
          height={600}
        >
          <div style={{ width: '180px', margin: '5px auto' }}>
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@cbaf9y`}
              value={mouldSearchValue}
              placeholder={'请输入模板名称'}
              onSearch={mouldSearch}
              onEnter={(value) => {
                mouldSearch(value);
              }}
              onSearchChange={(value) => {
                if (value == '') {
                  mouldSearch(value);
                }
              }}
            />
          </div>
          <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@x1w7uu`}
            selectedKeys={[`${mouldid}`]}
            onClick={this.changeMould}
          >
            {mouldList.length > 0 && mouldList.map((v, i) => <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@360ww5@${i}`} key={v.mouldid}>{v.mouldname}</Menu.Item>)
            }
          </Menu>
        </WeaNewScroll>
      </div>
    );
  }

  render() {
    const { yozoViewUrl, thurl, loading, openyozo, wpsEditor, mouldid, error, errorMsg } = this.props.docTemplateStore;
    return (
      <div style={{ height: '100%' }}>
        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@fbiv28`}
          isNew={true}
          leftWidth={200}
          leftCom={this.getLeftCom()}
        >
          {
            !error && !loading && mouldid != '' && <div style={{ width: '100%', height: '100%' }}>
              {// wps预览
                wpsEditor && <iframe id={'wfDocTemplate'} src={thurl} style={{ display: 'block', width: '100%', height: '100%', border: '0px' }} title="wpsEditor" />
              }
              {// 永中预览
                openyozo && <iframe id={'wfDocTemplate'} src={yozoViewUrl} style={{ display: 'block', width: '100%', height: '100%', border: '0px' }} title="openyozo" />
              }
            </div>
          }
          {
            !error && loading && <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@epyvhl`} size="large" style={{ width: '100%', margin: '250px auto' }} />
          }
          {
            error && <div>
              <img src="/images/ecology8/noright_wev8.png" width="162px" height="162px" style={{ margin: '100px auto 20px', display: 'block' }} />
              <div style={{ color: 'rgb(255,187,14)', textAlign: 'center', fontSize: '16px' }}>{errorMsg == '' ? '预览失败' : errorMsg}</div>
            </div>
          }
        </WeaLeftRightLayout>
      </div>
    );
  }
}
export default Index;
